<!--  -->
<template>
  <div class="anov-login-default-wrapper" ref="defaultLoginWrapper">
    <div
      class="anov-login-default-bg"
      ref="bg"
      :style="{ background: '#0C0F12' }"
    >
      <div
        class="anov-login-default-bg-img"
        ref="bgImg"
      ></div>
    </div>
    <div class="anov-login-default-box" id="anovLoginDefaultBox">
      <div class="anov-login-default-box-in"></div>
      <p class="logo"></p>
      <i  class="default-line"></i>
      <p class="project-name">{{ projectName }}</p>
      <div class="anov-login-default-params">
        <div class="anov-login-default-item anov-login-default-usename">
          <p class="name">账号</p>
          <input type="text" placeholder="请输入账号" class="login-input" v-model="username" @keydown="enterClick()"/>
        </div>
        <div class="anov-login-default-item anov-login-default-password">
          <p class="name">密码</p>
          <input type="password" placeholder="请输入密码" class="login-input" v-model="password" @keydown="enterClick()"/>
        </div>
        <div class="anov-login-default-item anov-login-default-vertify">
          <p class="name">验证码</p>
          <div class="anov-login-default-valid">
              <input
                type="text"
                placeholder="请输入验证码"
                class="login-input vertify-input"
                v-model="valid"
                @keydown="enterClick()"
            />
            <div
              class="anov-login-wrapper-btn anov-valid-btn"
              @click="validCodeClick"
            >
              <!--                <img class="anov-img-code" :src="imgCode" />-->
              <img
                class="anov-img-code"
                @click="refreshImgCode"
                :src="`./v2/gw/sys/verify/code?_t=${imgCodeTS}`"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="anov-login-error" id="loginError">{{ errorText }}</div>
      <div
        class="anov-login-default-btn"
        id="loginBtn"
        @click="loginBtnClick()"
      >
        登 录
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
// import { encrypt } from '@/assets/js/app/utils/rsaEncrypt.js'
import md5 from 'blueimp-md5'
import { clientEncrypt } from '@/utils/jsencrypt'
import { setCookie } from '../../../../../../../utils/cookie'
export default {
  name: 'defaultLogin',
  components: {},
  data() {
    return {
      projectName: '',
      username: '',
      password: '',
      valid: '',
      imgCode: '',
      errorText: '',
      uuid: '',
      url: '',
      imgCodeTS: Date.now()
    }
  },
  props: ['param'],
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    ...mapMutations(['setTokenId']),
    init() {
      this.projectName = app.config.projName
      //   let tl = new TimelineMax({})
      //   let tw1 = TweenMax.to()
      //   tl.addLabel('start')

      this.validCodeClick()
    },
    refreshImgCode() {
      this.imgCodeTS = Date.now()
    },
    open() {
      this.init()
    },
    close() {
      TweenMax.to('.anov-login-default-wrapper', 0.2, {
        opacity: 0,
        zIndex: -1
      })

      app.animateServer.options.paused = false
      app.animateServer.tlArr.forEach((tl) => {
        tl._paused = false
      })
    },
    // 验证码-click
    validCodeClick() {
      //获取验证码
      /*app.adminServer.getVerifyCodeImg((res) => {
        this.imgCode = res.img
        this.uuid = res.uuid
      })*/
    },
    validImgCode() {
      const { valid } = this
      if (this.validAccountName()) {
        if (this.validAccountPwd()) {
          if (!valid) {
            this.loginError('请填写图形验证码!')
          } else if (!/^\d{4}$/.test(valid)) {
            this.loginError('图形验证码应为四位数字!')
          }
          return /^\d{4}$/.test(valid)
        }
      }
      return false
    },
    validAccountName() {
      if (!this.username) {
        this.loginError('请输入账号名!')
      }
      return !!this.username
    },
    validAccountPwd() {
      if (this.validAccountName()) {
        if (!this.password) {
          this.loginError('请输入密码!')
        }
        return !!this.password
      }
      return false
    },
    loginBtnClick() {
      //根据license判断登陆是否成功
      // let loginFlag = app.licenseServer._validateUser(username, password)
      let params = {
        accountName: this.username,
        // accountPwd: encrypt(this.password),
        accountPwd: clientEncrypt(md5(this.password).toUpperCase()),
        verifyCode: this.valid,
        uuid: this.uuid,
        permissionsCode: ''
      }
      if(params.permissionsCode.length===0){
        this.$message({
          type: 'info',
          message: '帅哥提醒你要加permissionsCode'
        });
      }
      if (this.username && this.password) {
        if (this.valid) {
          // anov 自带的 adminServer登录接口
          /*app.adminServer.login(params, (res) => {
            if (res.status && res.data.status === 400) {
              this.validCodeClick()
              this.loginError(res.data.message)
            } else {
              //设置tokenId
              this.setTokenId(res.token)
              this.loginSuccess()
            }
          })*/
          // 业务系统使用的登录
          this.$store
            .dispatch('login/userLogin', params)
            .then(({ code, data, message }) => {
              //设置tokenId
              if (+code === 0) {
                setCookie('token', data, 1)
                this.$store.commit('login/setToken', data)
                this.setTokenId(data)
                this.loginSuccess()
                // this.$router.go(0)
              } else {
                this.loginError(message)
              }
            })
            .catch((err) => {
              this.loginError(err.message)
            })
        } else {
          let msg = '验证码不能为空'
          this.loginError(msg)
        }
      } else {
        let msg = '用户名或密码不能为空'
        this.loginError(msg)
      }
    },
    loginSuccess() {
      app.permissionServer.setLoginState(true)
      app.permissionServer.closeLogin()
    },
    loginError(msg) {
      this.errorText = msg
      TweenMax.to('.anov-login-error', 0.3, { opacity: 1, height: 30 })
    },
    enterClick() {
      if (event.keyCode == 13) {
        if (document.all) {
          document.getElementById('loginBtn').click()
        }
        // 其它浏览器
        else {
          var e = document.createEvent('MouseEvents')
          e.initEvent('click', true, true)
          document.getElementById('loginBtn').dispatchEvent(e)
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.anov-login-default-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.anov-login-default-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  .anov-login-default-bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('./img/body-ani.png') no-repeat;
  }
}
.anov-login-default-box {
  position: absolute;
  width: 378px;
  height: 456px;
  padding: 40px 64px;
  border: 1px solid;
  border-image: -webkit-linear-gradient(#456396, rgba(44, 62, 93, 0)) 20 20;
  border-image: linear-gradient(#456396, rgba(44, 62, 93, 0)) 20 20;
  background: rgba(40, 44, 52, 0.8);
  color: #fff;
  // .anov-login-default-box-in {
  //     width: 100%;
  //     height: 100%;
  //     border-radius: 10px;
  //     background: rgba(40,44,52,0.8);
  // }
  border-image: -webkit-linear-gradient(#456396, rgba(44, 62, 93, 0)) 20 20;
  .logo {
    position: absolute;
    top: 40px;
    width: 98px;
    height: 29px;
    background: url('../default/img/logo.png') no-repeat;
    background-size: 100% 100%;
  }
  .default-line {
    position: absolute;
    width: 171px;
    height: 2px;
    top: 78px;
    border-bottom: 1px solid #0c0f12;
  }
  .project-name {
    position: absolute;
    top: 85px;
    line-height: 30px;
  }
  .anov-login-default-params {
    position: absolute;
    top: 140px;
    .anov-login-default-item {
      margin-bottom: 5px;
      .name {
        padding-left: 10px;
        font-size: 12px;
        color: #d1dbe5;
        line-height: 32px;
      }
      .login-input {
        width: 250px;
        height: 32px;
        background: #1c2127;
        border: 1px solid rgba(209, 219, 229, 0.2);
        color: #d1dbe5;
        padding-left: 10px;
      }
      .vertify-input {
        width: 108px;
      }
    }
  }
  .anov-login-default-btn {
    position: absolute;
    width: 250px;
    bottom: 40px;
    height: 44px;
    background: #207fff;
    text-align: center;
    line-height: 44px;
    cursor: pointer;
    &:hover {
      background: rgba(32, 127, 255, 0.8);
      transition: all 0.3s;
    }
  }
}

// placeholder 样式
.login-input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: rgba(240, 240, 240, 0.4);
  font-size: 12px;
}

.login-input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: rgba(240, 240, 240, 0.4);
}

.login-input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgba(240, 240, 240, 0.4);
}

.login-input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: rgba(240, 240, 240, 0.4);
}

.anov-login-wrapper-btn {
  color: #68e0ef;
  text-align: center;
  background: rgba(20, 21, 25, 0.5);
  // border: 1px solid rgba(209, 219, 229, 0.2);
  cursor: pointer;
  .anov-img-code {
    width: 100%;
    height: 100%;
    mix-blend-mode: exclusion;
    filter: invert(1) hue-rotate(180deg);
  }
}
.anov-login-error {
  position: absolute;
  width: 250px;
  bottom: 83px;
  height: 0;
  line-height: 30px;
  color: rgba(222, 90, 84, 1);
  opacity: 0;
  text-align: center;
  white-space: nowrap; /*超出的空白区域不换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis;
}
.anov-login-valid {
  position: relative;
  width: 100%;
  display: flex;
  top: 40px;
  //   opacity: 0;
}
.anov-login-default-valid {
  display: flex;
  flex-direction: row;
}
.anov-valid-btn {
  width: 130px;
  height: 32px;
  margin-left: 10px;
  transition: all 0.3s ease-in-out;
  background: none;
}
</style>
